<template>
  <div class='content'>
      <!-- 顶部 !-->
      <div class="cells">
        <div class="left">
          <div class="left-top">
            <span class="name">{{ datas.userInfo.userName }}</span>
            <span class="card">{{ datas.userInfo.corpUserId }}</span>
          </div>
          <div class="left-bottom">{{ datas.deptInfo.deptNameCn }}</div>
        </div>
        <div class="right">
          <div>
            <img src="../common/images/user.png" alt="">
          </div>
        </div>
      </div>

      <div>
        上传 
      </div>
      <!-- 介绍部分 !-->
      <div class="desc">
        <div class="desc-left" @click="viewCompany()"> {{$t('companyIntroduce')}}</div>
        <div class="desc-right" @click="viewRules()">{{$t('employeeConductRules')}}</div>
      </div>
      <!-- 常用服务 !-->
      <div class="common-serve">
        <div class="serve-top">{{ $t('commonServe')}}</div>
        <div class="serve-bottom">
          <div v-for="(item, index) in datas.serveList[0].list" :key="index" class="serve-item" @click="viewChildren(item)">
            <div class="imgbox">
              <img :src="iconList[index]" width="40px" height="40px">
            </div>
            <div class="name">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <!-- 行政服务指南 !-->
      <div class="direction-serve">
        <div class="serve-top">{{ $t('userServe')}}</div>
        <div class="serve-bottom">
          <div v-for="(item, index) in datas.serveList[1].list" :key="index" @click="Servedirection(item)" class="serve-item">
            <div class="imgbox">
              <img :src="iconDirection[index]" width="40px" height="40px">
            </div>
            <div class="name">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="bottom-serve">
        <div class="serve-top">{{ $t('areaServe')}}</div>
        <div class="serve-bottom">
          <div v-for="(item, index) in datas.serveList[2].list" :key="index" class="serve-item">
            <div class="imgbox">
              <img :src="iconBottom[index]" width="40px" height="40px">
            </div>
            <div class="name">{{ item.label }}</div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import datas from '../mock/home/jsonData';
import i18n from '../i18n';
import buka from '../common/images/buka.png';
import money from '../common/images/money.png';
import getmoney from '../common/images/getmoney.png';
import servetel from '../common/images/servetel.png';
import dorm from '../common/images/dorm.png';
import computerFix from '../common/images/computerFix.png';
import homedesc from '../common/images/homedesc.png';
import regularBus from '../common/images/regularBus.png';
import traffic from '../common/images/traffic.png';
import tenement from '../common/images/tenement.png';
import receptionout from '../common/images/receptionout.png';
import guarantee from '../common/images/guarantee.png';
import getprove from '../common/images/getprove.png';
import cardset from '../common/images/cardset.png';
import registered from '../common/images/registered.png';

export default {
  data() {
    return {
      //页面导航数据
      datas,
      //导航icon数据
      iconList:[buka,money,getmoney,servetel],
      iconDirection:[computerFix,homedesc,
      dorm,regularBus,traffic,tenement,receptionout],
      iconBottom:[guarantee,getprove,cardset,registered],
    };
  },
  created() {
    window.HWH5.setNavigationBarTitle({ title:this.$t('newEmployee') });
    this.getCode();

  },
  computed: {
  },
  methods: {

onfil(){
        HWH5.uploadFile({
          serverUrl: serverUrl,
          filePath: filePath,
          name: 'file', // 根据服务器端要求命名，例如 'file', 'avatar' 等
          formData: { // 附加的表单数据
            'user': 'testUser',
            'extraInfo': 'someData'
          },
          headers: {
            'Custom-Header': 'someValue'
          },
          timeout: 60000, // 60秒超时
          zip: false, // 不压缩上传
          progress: 1, // 需要返回上传进度
          onProgress: (progressData) => {
            // progressData 中通常包含 progress (进度百分比), totalBytesSent, totalBytesExpectedToSend 等信息
            console.log('上传进度:', progressData.progress + '%');
          }
        }).then((response) => {
          // 上传成功
          // 注意：response 是服务器返回的数据，格式取决于你的服务器接口实现
          console.log('上传成功，服务器返回值:', response);
          // 尝试将返回的字符串解析为JSON对象（如果服务器返回的是JSON字符串）
          try {
            const data = JSON.parse(response);
            console.log('解析后的数据:', data);
          } catch (e) {
            console.log('服务器返回数据非JSON格式或解析失败:', response);
          }
        }).catch((error) => {
          // 上传失败
          console.error('上传文件失败:', error);
        });
        },
    // 查看子项目
    viewChildren(item) {
      switch (item.type)
        {
        // 考勤
        case 'attendance':
          this.$router.push('/checking')
          break;
        //薪酬
        case 'salary':
          HWH5.openWebview({
            uri: 'h5://20200629151916566393288/html/index.html'
          }).catch(error => {
            console.log(error);
          });
          break;
        // 出差报销
        case 'businessTrip':
          this.$router.push('/businessTrip')
          break;
          //服务热线
        case 'serviceHotline':
          this.$router.push('/serveHotLine')
          break;
          //电脑报修
        case 'computerInstallation':
          this.$router.push('/computerInstallation')
          break;
      }
    },
    // 服务指南
    Servedirection(item) {
        switch (item.type)
        {
        case 'computerInstallation':
          this.$router.push('/computerInstallation')
          break;
        case 'campusIntroduce':
          this.$router.push('/campusIntroduce')
          break;
        case 'employee':
          this.$router.push('/employee')
          break;
        case 'recepteVisitor':
          this.$router.push('/recepteVisitor')
          break;
        }
    },
    // 公司介绍
    viewCompany() {
      this.$router.push('/company')
    },
    // 公司制度
    viewRules() {
      this.$router.push('/companyRule')
    },
    // 获取免登码
    async getCode() {
      try {
        const userInfo = await HWH5.getAuthCode();
        console.log('code',userInfo);
      //  将免登码传进去作为获取用户信息的参数
        // this.getUserInfo(userInfo)
      } catch (error) {
        console.log(error)
      }
    },

    //通过免登码获取用户信息
    // getUserInfo(userInfo) {
    //   HWH5.fetchInternet('https:example.com?userId=' + userInfo.userId, { // 示例接口，实际中请使用真实接口
    //     method: 'get',
    //     headers: {
    //       'Content-Type': 'application/json'
    //     }
    //   }).then(res => {
    //     res.json().then(userInfo => {
    //   存储到store中作为其他接口调用的参数
    //       this.$store.commit('SAVE_USERINFO',userInfo)
    //     })
    //   }).catch(error => {
    //     console.log('err = ', error);
    //   });
    // },
  }
}
</script>

<style lang="less" scoped>

.content {
  padding: 10px;
  .cells{
    height: 120px;
    margin-top: 0 !important;
    padding: 20px 26px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; 
    background: #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(209,209,209,0.20);
    border-radius: 4px;
    margin-bottom: 8px;
    .left {
      width: 146px;
      padding: 14px 0 ;
      .left-top {
        display: flex;
        justify-content: space-between; 
        height: 28px;
        line-height: 28px;
        margin-bottom: 8px;
        .name {
          font-family: PingFangSC-Regular;
          font-size: 20px;
          color: #000000;
          letter-spacing: 0;
        }
        .card {
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #999999;
          letter-spacing: 0;
        }
      }
      .left-bottom {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0;
      }
    }
    .right {
      width:80px ;
    }
  }
  .desc {
    display: flex;
    justify-content: space-between;
    height: 46px;
    margin-bottom: 8px;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
    .desc-left {
      width:49%;
      line-height: 46px;
      text-align: center;
      background: #FFFFFF;
      box-shadow: 0 2px 4px 0 rgba(209,209,209,0.20);
      border-radius: 4px;
    }
    .desc-right {
      width:49%;
      line-height: 46px;
      text-align: center;
      background: #FFFFFF;
      box-shadow: 0 2px 4px 0 rgba(209,209,209,0.20);
      border-radius: 4px;
    }
  }
  .common-serve {
    height: 117px;
    width:100%;
    background: #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(209,209,209,0.20);
    border-radius: 4px;
    margin-bottom: 8px;
    .serve-top {
      height:39px;
      line-height: 39px;
      padding-left: 16px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #999999;
      letter-spacing: 0;
    }
    .serve-bottom {
      height:60px;
      width:100%;
      box-sizing: border-box;
      padding: 0 12px;
      display: flex;
      justify-content: space-between;
      .serve-item {
        display: flex;
        flex-wrap: wrap;
        width: 25%;
        text-align: center;
        .imgbox {
          width: 100%;
          margin: 0 auto;
        }
        .icon {
          height: 40px;
          width: 40px;
          border-radius: 6px;
        }
        .name {
          text-align: center;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          width:100%;
          color: #343745;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .direction-serve {
    height: 199px;
    width:100%;
    background: #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(209,209,209,0.20);
    border-radius: 4px;
    margin-bottom: 8px;
    .serve-top {
      height:39px;
      line-height: 39px;
      padding-left: 16px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #999999;
      letter-spacing: 0;
    }
    .serve-bottom {
      height:60px;
      width:100%;
      box-sizing: border-box;
      padding: 0 12px;
      display: flex;
      justify-content:  flex-start;
      flex-wrap: wrap;
      .serve-item {
        display: flex;
        flex-wrap: wrap;
        width: 25%;
        text-align: center;
        margin-bottom: 20px;
        .imgbox {
          width: 100%;
          margin: 0 auto;
        }
        .icon {
          height: 40px;
          width: 40px;
          border-radius: 6px;
        }
        .name {
          text-align: center;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          width:100%;
          color: #343745;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .bottom-serve {
    height: 117px;
    width:100%;
    background: #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(209,209,209,0.20);
    border-radius: 4px;
    .serve-top {
      height:39px;
      line-height: 39px;
      padding-left: 16px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #999999;
      letter-spacing: 0;
    }
    .serve-bottom {
      height:60px;
      width:100%;
      box-sizing: border-box;
      padding: 0 12px;
      display: flex;
      justify-content: space-between;
      .serve-item {
        display: flex;
        flex-wrap: wrap;
        width: 25%;
        text-align: center;
        .imgbox {
          width: 100%;
          margin: 0 auto;
        }
        .icon {
          height: 40px;
          width: 40px;
          border-radius: 6px;
        }
        .name {
          text-align: center;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          width:100%;
          color: #343745;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>